<template>
	<view class="work-container">
		<view class="bigImg" style="width: 90%;text-align: center;">
			<image-view v-if="baseInfo.panoramaBodyUrl && baseInfo.panoramaBodyUrl.indexOf('http') > -1"
				style="width: 100%;" :src="baseInfo.panoramaBodyUrl" :big='true'
				:qj="baseInfo.panoramaBodyUrl"></image-view>
			<image-view v-if="baseInfo.panoramaBodyUrl && !(baseInfo.panoramaBodyUrl.indexOf('http') > -1)"
				style="width: 100%;" :src="baseInfo.panoramaBodyUrl" :big='true'
				:qj="baseInfo.panoramaBodyUrl"></image-view>
			<view>{{ $t('search:panorama') }}</view>
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-start;">
			<view class="bigImg bigImgContain" style="text-align: center;width: auto;margin: 20px;position: relative;">
				<view v-if='baseInfo.captureBodyUrl' class="details-icon-search"
					@click="searchAgain(baseInfo.captureBodyUrl)"></view>
				<image-view v-if="baseInfo.captureBodyUrl && baseInfo.captureBodyUrl.indexOf('http') > -1"
					:src="baseInfo.captureBodyUrl" :qj="baseInfo.captureBodyUrl"
					style="width: 100%;height: 100%;object-fit: contain;" :big='true'></image-view>
				<image-view v-if="baseInfo.captureBodyUrl && !(baseInfo.captureBodyUrl.indexOf('http') > -1)"
					:src="baseInfo.captureBodyUrl" style="width: 100%;height: 100%;object-fit: contain;"></image-view>
				<view>{{ $t('search:snapshot') }}</view>
			</view>
		</view>
		<view class="Nav">
			<view :class="index == 1 ? 'typeCarS' : 'typeCar'" @click="NavClick(1)">
				{{ $t('search:basicAttributes') }}
			</view>
			<view :class="index == 2 ? 'typeCarS' : 'typeCar'" @click="NavClick(2)">
				{{ $t('search:appearanceFeatures') }}
			</view>
			<view :class="index == 3 ? 'typeCarS' : 'typeCar'" @click="NavClick(3)">
				{{ $t('search:accessoryFeatures') }}
			</view>
		</view>
		<ul class="ul" v-if="index == 1">
			<li class="li">
				<view class="title">{{ $t('search:gender') }}</view>
				<view class="tit">{{ baseInfo.bodyGenderCode }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:age') }}</view>
				<view class="tit">{{ baseInfo.bodyAgeGroup }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:ethnicity') }}</view>
				<view class="tit">{{ baseInfo.bodyEthicCode }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:direction') }}</view>
				<view class="tit">{{ baseInfo.moveDirection }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureTime') }}</view>
				<view class="tit">{{ baseInfo.captureTimeL }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureDevice') }}</view>
				<view class="tit">{{ baseInfo.deviceName }}</view>
			</li>
		</ul>
		<ul class="ul" v-if="index == 2">
			<li class="li">
				<view class="title">{{ $t('search:bodyType') }}</view>
				<view class="tit">{{ baseInfo.bodyType }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:hairStyle') }}</view>
				<view class="tit">{{ baseInfo.bodyHairStyle }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:beard') }}</view>
				<view class="tit">{{ baseInfo.bodyHasBeard }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:upperStyle') }}</view>
				<view class="tit">{{ baseInfo.coatStyle }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:upperTexture') }}</view>
				<view class="tit">{{ baseInfo.coatTexture }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:upperColor') }}</view>
				<view class="tit">{{ baseInfo.coatColor }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:sleeves') }}</view>
				<view class="tit">{{ baseInfo.bodyCoatLength }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:lowerLength') }}</view>
				<view class="tit">{{ baseInfo.trousersLength }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:lowerStyle') }}</view>
				<view class="tit">{{ baseInfo.trousersStyle }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:lowerColor') }}</view>
				<view class="tit">{{ baseInfo.trousersColor }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:shoesType') }}</view>
				<view class="tit">{{ baseInfo.shoesStyle }}</view>
			</li>
		</ul>
		<ul class="ul" v-if="index == 3">
			<li class="li">
				<view class="title">{{ $t('search:hat') }}</view>
				<view class="tit">{{ baseInfo.bodyAppendantCap }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:headScarf') }}</view>
				<view class="tit">{{ baseInfo.bodyHijab }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:helmet') }}</view>
				<view class="tit">{{ baseInfo.bodyAppendantHelmet }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:mask') }}</view>
				<view class="tit">{{ baseInfo.appendantMask }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:glasses') }}</view>
				<view class="tit">{{ baseInfo.appendantGlasses }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:scarf') }}</view>
				<view class="tit">{{ baseInfo.appendantScarf }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:shoulderBag') }}</view>
				<view class="tit">{{ baseInfo.shoulderBag }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:backpack') }}</view>
				<view class="tit">{{ baseInfo.backpack }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:handbag') }}</view>
				<view class="tit">{{ baseInfo.newHandbag }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:umbrella') }}</view>
				<view class="tit">{{ baseInfo.appendantUmbrella }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:riding') }}</view>
				<view class="tit">{{ baseInfo.bodyRide }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:phone') }}</view>
				<view class="tit">{{ baseInfo.appendantPhone }}</view>
			</li>
		</ul>
	</view>
</template>

<script>
import {
	// getBodyDetail,
	getPersonDetails2
} from '@/api/warning/details.js'
import {
	formatDate,
	getBodyGenderCodeName,
	getBodyAgeGroupName,
	getBodyEthicCodeName,
	getMoveDirectionName,
	getBodyTypeName,
	getBodyHairStyleName,
	getBodyHasBeardName,
	getCoatStyleName,
	getCoatTextureName,
	getCoatColorName,
	getBodyCoatLengthName,
	getTrousersLengthName,
	getTrousersStyleName,
	getTrousersColorName,
	getShoesStyleName,
	getBodyAppendantCapName,
	getBodyHijabName,
	getBodyAppendantHelmetName,
	getAppendantMaskName,
	getAppendantGlassesName,
	getAppendantScarfName,
	getShoulderBagName,
	getBackpackName,
	getNewHandbagName,
	getUmbrellaName,
	getBodyRideName,
	getAppendantPhoneName
} from '@/utils/dict.js'
export default {
	data() {
		return {
			index: 1,
			searchParam: {},
			baseInfo: {},
			bodyGenderCode: "",
			imgUrl: "/fileApi/",
		}
	},
	onLoad(option) {
		this.searchParam = {
			"targetFields": ["appendantGlasses", "appendantGlassesScore", "appendantMask",
				"appendantMaskScore", "appendantOther", "appendantOtherScore", "appendantPack",
				"appendantPackScore", "appendantPhone", "appendantPhoneScore", "appendantScarf",
				"appendantScarfScore", "appendantUmbrella", "appendantUmbrellaScore", "appendantWatch",
				"appendantWatchScore", "backpack", "backpackScore", "bagStyle", "bagStyleScore", "barrow",
				"barrowScore", "behavior", "behaviorScore", "bodyAgeGroup", "bodyAgeGroupScore",
				"bodyAgeLowerLimit", "bodyAgeLowerLimitScore", "bodyAgeUpLimit", "bodyAgeUpLimitScore",
				"bodyAppendantCap", "bodyAppendantCapScore", "bodyAppendantHelmet",
				"bodyAppendantHelmetScore", "bodyBoxHeight", "bodyBoxWidth", "bodyBoxX", "bodyBoxY",
				"bodyCaptureClusterStatus", "bodyCaptureDeleteStatus", "bodyCaptureExternalId",
				"bodyCaptureTime", "bodyCoatLength", "bodyCoatLengthScore", "bodyEthicCode",
				"bodyEthicCodeScore", "bodyFaceStyle", "bodyFaceStyleScore", "bodyFeature",
				"bodyFeatureScore", "bodyFeatureStatus", "bodyFeatureStatusRemark", "bodyFileId",
				"bodyGenderCode", "bodyGenderCodeScore", "bodyGlassColor", "bodyGlassColorScore",
				"bodyGlassStyle", "bodyGlassStyleScore", "bodyHairColor", "bodyHairColorScore",
				"bodyHairStyle", "bodyHairStyleScore", "bodyHasBeard", "bodyHasBeardScore", "bodyHijab",
				"bodyHijabScore", "bodyIsDeputyDriver", "bodyIsDeputyDriverScore", "bodyIsDriver",
				"bodyIsDriverScore", "bodyLogId", "bodyObjectId", "bodyOnFoot", "bodyOnFootScore",
				"bodyQualityScore", "bodyQualityScoreExt", "bodyReserveInfo", "bodyRide", "bodyRideScore",
				"bodySafeBelt", "bodySafeBeltScore", "bodySkinColor", "bodySkinColorScore", "bodyState",
				"bodyStateScore", "bodyTemperature", "bodyTemperatureScore", "bodyTrackId",
				"bodyTrackIdBeginTime", "bodyType", "bodyTypeScore", "bodyVertTruncation",
				"bodyVertTruncationScore", "captureBodyInfraredUrl", "captureBodyUrl", "captureDataType",
				"captureExtField1", "captureExtField2", "captureExtField3", "captureExtField4",
				"captureExtField5", "captureReceiveTime", "captureSeq", "captureTime", "captureType",
				"carry", "carryScore", "coatColor", "coatColorScore", "coatStyle", "coatStyleScore",
				"coatTexture", "coatTextureScore", "createTime", "curRecordBodyTotal",
				"curRecordFaceTotal", "curRecordNonVehicleTotal", "curRecordVehicleTotal", "dataSource",
				"day", "detWithHelmet", "detWithHelmetScore", "devExtField1", "devExtField2",
				"devExtField3", "deviceAddress", "deviceId", "deviceName", "deviceType", "duplicateTag",
				"egCaptureId", "facialFeature", "facialFeatureScore", "featureStr", "fromSystem",
				"frontPackStyle", "frontPackStyleScore", "guid", "habitualMovement",
				"habitualMovementScore", "haveBaby", "haveBabyScore", "heightLowerLimit",
				"heightLowerLimitScore", "heightUpLimit", "heightUpLimitScore", "hour", "isLinkage", "lat",
				"lng", "mon", "month", "moveDirection", "moveDirectionScore", "moveSpeed",
				"moveSpeedScore", "newHandbag", "newHandbagScore", "panoramaBodyInfraredUrl",
				"panoramaBodyUrl", "personStatus", "personStatusScore", "physicalFeature",
				"physicalFeatureScore", "remark", "scarfColor", "scarfColorScore", "shoesColor",
				"shoesColorScore", "shoesStyle", "shoesStyleScore", "shoulderBag", "shoulderBagScore",
				"subDeviceType", "subType", "suitCase", "suitCaseScore", "systemNo", "targetBodyBoxHeight",
				"targetBodyBoxWidth", "targetBodyBoxX", "targetBodyBoxY", "trousersColor",
				"trousersColorScore", "trousersLength", "trousersLengthScore", "trousersStyle",
				"trousersStyleScore", "umbrella", "umbrellaColor", "umbrellaColorScore", "umbrellaScore",
				"year"
			],
			"sysCaptureBodyIds": [option.captureBodyId]
		}
		this.getBodyDetail()
	},

	mounted() {

	},
	methods: {
		searchAgain(src) {
			var obj = {}
			obj.imgUrl = src
			obj.showType = 1
			this.$tab.redirectTo('/pages/search/rtjs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
		},
		NavClick(index) {
			this.index = index
		},
		getBodyDetail() {
			getPersonDetails2(this.searchParam).then(res => {
				if (res.code = "0000000") {
					let resInfo = res.data[0].targetFieldMapping

					this.baseInfo.panoramaBodyUrl = resInfo.panoramaBodyUrl
					this.baseInfo.captureBodyUrl = resInfo.captureBodyUrl

					this.baseInfo.bodyGenderCode = getBodyGenderCodeName(resInfo.bodyGenderCode)
					this.baseInfo.bodyAgeGroup = getBodyAgeGroupName(resInfo.bodyAgeGroup)
					this.baseInfo.bodyEthicCode = getBodyEthicCodeName(resInfo.bodyEthicCode)
					this.baseInfo.moveDirection = getMoveDirectionName(resInfo.moveDirection)
					this.baseInfo.captureTimeL = formatDate(resInfo.captureTime)
					this.baseInfo.deviceName = resInfo.deviceName

					this.baseInfo.bodyType = getBodyTypeName(resInfo.bodyType)
					this.baseInfo.bodyHairStyle = getBodyHairStyleName(resInfo.bodyHairStyle)
					this.baseInfo.bodyHasBeard = getBodyHasBeardName(resInfo.bodyHasBeard)
					this.baseInfo.coatStyle = getCoatStyleName(resInfo.coatStyle)
					this.baseInfo.coatTexture = getCoatTextureName(resInfo.coatTexture)
					this.baseInfo.coatColor = getCoatColorName(resInfo.coatColor)
					this.baseInfo.bodyCoatLength = getBodyCoatLengthName(resInfo.bodyCoatLength)
					this.baseInfo.trousersLength = getTrousersLengthName(resInfo.trousersLength)
					this.baseInfo.trousersStyle = getTrousersStyleName(resInfo.trousersStyle)
					this.baseInfo.trousersColor = getTrousersColorName(resInfo.trousersColor)
					this.baseInfo.shoesStyle = getShoesStyleName(resInfo.shoesStyle)

					this.baseInfo.bodyAppendantCap = getBodyAppendantCapName(resInfo.bodyAppendantCap)
					this.baseInfo.bodyHijab = getBodyHijabName(resInfo.bodyHijab)
					this.baseInfo.bodyAppendantHelmet = getBodyAppendantHelmetName(resInfo.bodyAppendantHelmet)
					this.baseInfo.appendantMask = getAppendantMaskName(resInfo.appendantMask)
					this.baseInfo.appendantGlasses = getAppendantGlassesName(resInfo.appendantGlasses)
					this.baseInfo.appendantScarf = getAppendantScarfName(resInfo.appendantScarf)
					this.baseInfo.shoulderBag = getShoulderBagName(resInfo.shoulderBag)
					this.baseInfo.backpack = getBackpackName(resInfo.backpack)
					this.baseInfo.newHandbag = getNewHandbagName(resInfo.newHandbag)
					this.baseInfo.appendantUmbrella = getUmbrellaName(resInfo.appendantUmbrella)
					this.baseInfo.bodyRide = getBodyRideName(resInfo.bodyRide)
					this.baseInfo.appendantPhone = getAppendantPhoneName(resInfo.appendantPhone)

					this.baseInfo = JSON.parse(JSON.stringify(this.baseInfo));
				}
			})
		}
	},
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 40rpx 40rpx 10rpx 40rpx;
}

.top .image {
	width: 35%;
}

.image .img {
	width: 235rpx;
	height: 235rpx;
	border-radius: 10rpx;
}

.Proportion_box {
	width: 30%;
	padding: 30rpx 30rpx;
}

.Proportion {
	width: 148rpx;
	height: 148rpx;
	font-size: 40rpx;
	color: #2979ff;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #2979ff;
}

.text {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx 30rpx 40rpx;
}

.text .txt {
	width: 35%;
	text-align: center;
	color: #8d8d8d;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
}

.Nav {
	width: 700rpx;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	border-bottom: 1px solid #f1f1f1;
}

.typeCar {
	padding: 20rpx;
}

.typeCarS {
	padding: 20rpx;
	border-bottom: 1px solid #2979ff;
	color: #2979ff;
}

.bigImg {
	width: 300rpx;
	height: 400rpx;
	margin: 40rpx auto;
}

.bigImgContain {
	flex: 1 1 0%;
	background-color: #f1f1f1;
}

.bigImg image {
	width: 300rpx;
	height: 400rpx;
}

.details-icon-search {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 1;
	background: url('../../../static/images/icon_search.png');
	background-size: 100% 100%;
}
</style>
